<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            margin: 0 auto;
            padding: 0px;
            font-size: 12px;
            background: url(images/bg.gif) repeat center 36px;
            text-align: center;
            background-color: #c30230;
        }

        #content {
            margin: 0 auto;
            width: 960px;
            background: url(images/content_bg.jpg) no-repeat left top;
            height: 627px;
        }

        #content .tip1,
        #content .tip2,
        #content .tip3,
        #content .tip4,
        #content .tip5,
        #content .tip6,
        #content .tip7,
        #content .tip8 {
            position: absolute;
            width: 227px;
            left: 200px;
            top: 100px;
        }

        #content .tip1 .tip_h {
            background: url(images/tip1_h.gif) no-repeat left top;
        }

        #content .tip1 .tip_h,
        #content .tip2 .tip_h,
        #content .tip3 .tip_h,
        #content .tip4 .tip_h,
        #content .tip5 .tip_h,
        #content .tip6 .tip_h,
        #content .tip7 .tip_h,
        #content .tip8 .tip_h {
            width: 227px;
            padding-top: 45px;
            height: 23px;
            text-align: left;
            cursor: move;
        }

        #content .tip1 .tip_c {
            background: url(images/tip1_c.gif) repeat-y;
        }

        #content .tip1 .tip_c,
        #content .tip2 .tip_c,
        #content .tip3 .tip_c,
        #content .tip4 .tip_c,
        #content .tip5 .tip_c,
        #content .tip6 .tip_c,
        #content .tip7 .tip_c,
        #content .tip8 .tip_c {
            width: 200px;
            padding-left: 12px;
            padding-right: 15px;
            min-height: 40px;
            text-align: left;
            line-height: 20px;
            max-height: 160px;
            word-wrap: break-word;
            word-break: break-all;
            overflow: hidden;
        }

        #content .tip1 .tip_f {
            background: url(images/tip1_f.gif) no-repeat left top;
        }

        #content .tip1 .tip_f,
        #content .tip2 .tip_f,
        #content .tip3 .tip_f,
        #content .tip4 .tip_f,
        #content .tip5 .tip_f,
        #content .tip6 .tip_f,
        #content .tip7 .tip_f,
        #content .tip8 .tip_f {
            width: 227px;
            height: 53px;
            padding-top: 20px;
        }

        #content .close,
        #content .close2 {
            float: left;
            font-size: 12px;
            cursor: pointer;
            color: #000000;
        }

        .clr {
            clear: both;
            overflow: auto;
            display: block;
            height: 0px;
        }

        #content .icon {
            float: left;
            width: 35px;
            padding-left: 15px;
            height: 35px;
            text-align: center;
        }

        #content .name {
            float: right;
            padding-right: 15px;
            text-align: right;
            font-size: 14px;
            line-height: 35px;
            color: #C0F;
        }

        #content .num {
            float: left;
            padding-left: 7px;
            width: 195px;
        }

        #count {
            font-size: 20px;
            font-weight: 600;
            line-height: 28px;
            color: #222;
        }

        #comment {
            padding: 20px;
            box-sizing: border-box;
            height: 180px;
            margin-top: 20px;
            border-radius: 20px;
            osition: relative;
            overflow: hidden;
            border-radius: 8px;
            padding: 16px;
            background: #f8f8f8;

        }

        #comment textarea {
            display: block;
            border: 0;
            padding: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            max-height: 72px;
            width: 100%;
            height: 150px;
            font-size: 16px;
            line-height: 24px;
            color: #222;
            outline: none;
            resize: none;
            background: #f8f8f8;
            -webkit-transition: height .3s ease-in-out;
            -moz-transition: height .3s ease-in-out;
            transition: height .3s ease-in-out;

        }

        #comment button {
            border: none;
            border-radius: 4px;
            padding: 6px 18px;
            font-size: 14px;
            font-weight: 500;
            line-height: 20px;
            color: #fff;
            background: hotpink;
            cursor: pointer;
            outline: none;
        }

        #comment button:hover {
            background: deeppink;
        }

        #comment-box {
            width: 960px;
            margin: 0 auto;
            background: #fff;

        }

        .action {
            text-align: right;
        }

        #count {
            text-align: left;
            margin-bottom: 10px;
        }
    </style>
</head>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

<body>
    <div id="content"></div>
    <div id="comment-box">
        <div id="comment">
            <div id="count">
                <b>评论:0</b>
            </div>
            <div id="ipt">
                <textarea placeholder="说点什么吧..." resize="none" name="" id="" cols="30" rows="10"></textarea>
                <div class="action">
                    <button id="submit">发送评论</button>
                </div>
            </div>

        </div>
    </div>
</body>

</html>
<script>


    var zIndex = 0;//记录层级的最大值
    var content = document.getElementById("content");
    let count = document.getElementById('comment').firstElementChild;//获取评论数量的元素
    let ipt = document.getElementById('ipt').children[0]//获取输入框
    let submitBtn = document.getElementById("submit")//获取发送按钮


    function del(el, id) {//封装删除评论方法
        //id就是要删除的纸条的id
        //提示是否要删除
        let sure = confirm('你确定要删除吗');
        if (!sure) {
            alert('已取消删除');
            return
        }
        $.ajax({
            url: "http://chst.vip:1902/students/del",
            data: {
                id
            }
        })
            .then(res => {
                console.log("====", res);

                if (res.state) {
                    //删除成功,更新视图
                    //把当前小叉号所处的纸条 从content中移除
                    content.removeChild(el);
                    render()
                } else {
                    //提示错误
                    alert(res.msg)
                }
            })
    }

    function render() {
        $.ajax({
            url: "http://chst.vip:1902/students/getstulist",
            type: "get"
        })
            .then(res => {
                //先清空content中的内容
                content.innerHTML = "";
                console.log(res);
                var messages = res.data;
                //设置评论的数量
                console.log(count);

                count.innerHTML = `评论:${messages.length}条`;

                //根据数据动态创建结构
                for (var i = 0; i < messages.length; i++) {
                    var msg = messages[i];//每一天数据
                    //最外层的div用对象的方式创建 方便将来绑定事件
                    //里面的其他代码用拼接字符串的形式 因为这样更简单
                    var tip = document.createElement("div");
                    tip.className = "tip1";
                    tip.id = msg.id;//将id绑在纸条盒子上
                    var str = '<div class="tip_h" title="双击关闭纸条">'
                        + '<div class="num">第[' + msg.id.slice(8) + ']条 ' + msg.time + '</div>'
                        + '<div class="close" title="关闭纸条">×</div>'
                        + '<div class="clr"></div>'
                        + '</div>'
                        + '<div class="tip_c">'
                        + msg.content
                        + '</div>'
                        + '<div class="tip_f">'
                        + '<div class="icon">'
                        + '<img src="images/bpic_1.gif" alt="" title="">'
                        + '</div>'
                        + '<div class="name">' + msg.name + '</div>'
                        + '<div class="clr"></div>'
                        + '</div>';
                    tip.innerHTML = str;
                    content.appendChild(tip);//追加到content里
                    //2.动态生成位置
                    //水平位置 x 400-800 [0,1) *400 [0,400) +400 [400,800) parseInt
                    var x = parseInt(Math.random() * 400 + 400);
                    //竖直位置 y 0-400 [0,1) *400 [0,400) parseInt
                    var y = parseInt(Math.random() * 400);
                    //设置位置
                    tip.style.left = x + "px";
                    tip.style.top = y + "px";
                    //3.添加功能
                    //3.1点击当前纸条让当前纸条层级最高
                    tip.onselectstart = function (e) { e.preventDefault() }
                    tip.onclick = function () {
                        zIndex++;
                        this.style.zIndex = zIndex;
                    };
                    //3.2双击头部关闭纸条
                    var header = tip.firstElementChild;
                    header.ondblclick = function () {
                        //把当前双击的这个头部 所属的纸条从content中移除
                        var tip = this.parentNode;
                        //获取id
                        let id = this.parentNode.id;
                        del(tip, id)
                    };


                    header.onmousedown = function (e) { //在纸条顶部按下,拖拽纸条移动
                        let ofx = e.offsetX;
                        let ofy = e.offsetY;

                        console.log(content.offsetWidth + content.offsetLeft);

                        let _this = this;

                        content.onmousemove = function (e) {//移动事件绑定给content防止甩飞
                            let pgx = e.pageX - ofx;
                            let pgy = e.pageY - ofy;

                            //限制拖拽纸条的的范围,要在内容区域中
                            let minLeft = content.offsetLeft;//最小的水平位置
                            let maxLeft = content.offsetWidth + content.offsetLeft - _this.offsetWidth;//最大的水平位置;


                            let maxTop = content.offsetHeight - _this.parentNode.offsetHeight;//最大的垂直位置
                            let minTop = 0;//最小的垂直位置

                            if (pgx < minLeft) {
                                pgx = minLeft;
                            } else if (pgx > maxLeft) {
                                pgx = maxLeft
                            }

                            if (pgy < minTop) {
                                pgy = minTop;
                            } else if (pgy > maxTop) {
                                pgy = maxTop
                            }

                            _this.parentNode.style.left = pgx + "px";
                            _this.parentNode.style.top = pgy + "px";
                        }
                    }
                    header.onmouseup = function () {//鼠标弹起移除移动事件
                        content.onmousemove = null
                    }
                    content.onmouseleave = function () {//注册这个事件放置鼠标拖出盒子外后再回来,纸条还跟随移动的问题
                        this.onmousemove = null;
                    }
                    //3.3单击小叉号 关闭当前纸条
                    //getElementsByClassName 通过类名获取元素
                    var close = tip.getElementsByClassName("close")[0];
                    close.onclick = function () {

                        //获取父节点绑定的数据id
                        let id = this.parentNode.parentNode.id;
                        var tip = this.parentNode.parentNode;
                        del(tip, id)//也要从远程服务器中删除

                    };
                }

            })
    }
    render() //首次加载
    //评论功能
    //禁用按钮的方法
    function disableBtn() {
        let val = ipt.value;
        //非空验证,如果没有输入,禁用按钮
        if (!val) {
            submitBtn.disabled = true;
            submitBtn.style.background = "#ccc"
        }
    }
    disableBtn()

    //评论输入框输入事件
    ipt.oninput = function () {
        //解禁按钮
        submitBtn.disabled = false;
        submitBtn.style.background = "hotpink";
        //如果输入的值是空,重新禁用按钮,这个方法会自己判断
        disableBtn()
    }

    //点击提交事件处理函数
    function submitComment() {
        //获取输入框的值
        let content = ipt.value;
        //弹出确认输入框,输入昵称
        let name = prompt('请输入你的昵称');
        if (!name) {
            alert('昵称不能输入为空')
            return
        }
        //发送ajax 提交评论
        $.ajax({
            url: "http://chst.vip:1902/students/addlist",
            type: 'post',
            data: {
                content,
                name
            }
        }).then(res => {
            //如果添加成功 更新视图
            if (res.state) {
                render()
            } else {
                //提示错误
                alert('提交出错')
            }
        })
    }
    //点击事件
    submitBtn.onclick = submitComment();
    //按回车提交
    document.onkeydown = function (e) {
        if (e.keyCode === 13 && !submitBtn.disabled) {//回车的时候 按钮不能是禁用状态
            submitComment()
        }
    }
</script>